<template>
 <div class="dinwei">
          <div class="header">
            <img src="../../assets/image/logo.png" alt="">
            <h1>文章管理中心</h1>
        </div>

        <div class="personword">
        <div class="header">
          <div class="headerleft">
                <el-input
                size="mini"
                placeholder="请输入章节"
                v-model="message"
                @change="getsearch"
                clearable>
            </el-input>
          </div>
            <div class="headerright">
            <el-button size="mini" type="primary" @click="newchapter">添加新章节</el-button>
          </div>
        </div>

        <div class="container">
             <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                    prop="chaptertitle"
                    label="小说章节"
                    width="550">
                    </el-table-column>
                    <el-table-column
                    prop="operation"
                    label="操作">
                      <template slot-scope="scope">
                       <el-button type="success" icon="el-icon-edit"  @click="xiugai(scope.row)">修改</el-button>   
                       <el-button type="danger" icon="el-icon-delete"  @click="sanchu(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
            </el-table>

             <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
        </div>
    </div>
 </div>
</template>
<script>
  export default {
    data() {
      return {
        currentPage4: 4,
        message: '',
         tableData: [],
         authorid:0,
         articleid:0,
         page:1,
         pageNumber:4
      }
    },
    created(){
      //获取文章id
      this.articleid=this.$route.params.articleid
        //获取全部章节
        this.getallchapter()
    },
    methods:{

        handleSizeChange(val) {
              this.pageNumber=val
              this.getallchapter()
            },
      handleCurrentChange(val) {
        this.page=val
        this.getallchapter()
        // console.log(`当前页: ${val}`);
      },

      //跳转到添加新章节页面
      newchapter(){
          this.$router.push(`/newchapter/${this.articleid}`)
      },

      //搜索章节
      async getsearch(){
            let data=await this.axios.get(`chapter/getallcharptersearch`,{
              params:{
                message:this.message,
                articleid:this.articleid
              }
            })
            console.log(data)
            this.tableData=data.data.data  
      },

      //删除当前章节
       sanchu(chapterdata){
        let chapterid=chapterdata.chapterid

         this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let data=await this.axios.get(`chapter/delchapter?chapterid=${chapterid}`)   
          this.getallchapter()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

       
      },

      //跳转到修改当前章节页面
      xiugai(e){

          this.$store.commit("putchapter",e)
          this.$router.push(`/xiugaichapter`)
      },

      //获取全部的章节
      async getallchapter(){
        let data=await this.axios.get("chapter",{
          params:{
            page:this.page,
            pageNumber:this.pageNumber,
            articleid:this.articleid
          }
        })
        // console.log(data)
        this.tableData=data.data.data
      },

    //跳转到写作页面
    goputartcle(){
      this.$router.push("/articlecreate")
    }

    },
  }
</script>

<style scoped lang="less">
.dinwei{
     width:100%;
    height: calc(100vh - 100px);
    position: relative;
     .header{
        padding-left: 200px;
        padding-right: 200px;
        height:100px;
        max-width: 100vw;
        background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
        position: relative;
        display: flex;
        img{
            flex: 2;
            height: 100px;
            display: inline-block;
        }
        h1{
            flex: 3;
            color: #2ed573;
            display: inline-block;
            text-align: center;
            height:100px;
            line-height: 100px;
            letter-spacing:20px;
        }
    }
    .personword {
     background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
     min-height: cala(100vh-100px);
     width:800px;
        text-align: center;
        padding-top: 20px;
        background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
        border:2px solid #ccc;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        border-radius: 10px;
        .header {
            height:50px;
            display: flex;
          .headerleft {
              flex: 2;
              padding: 10px;
              el-input {
               width: 80px;   
              }
            }

    .headerright {
        flex: 3;
        padding: 10px 20px;
      el-button {

      }
    }
  }
}
}

</style>

